<template>
	<view class="recognition-container">
		<view class="grid">
			<text style="font-size: 28rpx; font-weight: bold">请提供清晰正面的菜单照片</text>

			<image src="@/static/images/recognition/sure.jpg" style="width: 100%; height: 50%; margin-top: 20rpx" mode=""></image>

			<view style="font-size: 28rpx; font-weight: bold; margin-top: 20rpx">避免如下情况</view>

			<image src="@/static/images/recognition/no.jpg" style="height: 35%; width: 100%; margin-top: 20rpx" mode=""></image>
		</view>

		<view class="bottom">
			<button class="start-btn" @click="startBtn">开始录菜</button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import uploadImage from '@/utils/uploadImage';
export default {
	data() {
		return {};
	},
	methods: {
		startBtn() {
			uploadImage
				.showActionSheet()
				.then(async (res) => {
					console.log(res);
					const result = await uploadImage.uploadImage(res);
					uni.redirectTo({
						url: '/pages/workbench/recognition/scanImage?imageUrl=' + result
					});
				})
				.catch((err) => {
					this.$refs.uToast.show({ type: 'error', message: '上传失败,请稍后重试' });
				});
		}
	}
};
</script>

<style scoped lang="scss">
.recognition-container {
	height: 100vh;
	background-color: #f7f8fa;
	display: flex;
	flex-direction: column;
	.grid {
		display: flex;
		flex-direction: column;
		margin: 20rpx 20rpx 0;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		flex: 1;
	}
	.bottom {
		height: 120rpx;
		background: white;
		.start-btn {
			width: 80%;
			height: 80rpx;
			margin: 20rpx auto;
			background-color: $color-primary;
			border-radius: 40rpx;
			line-height: 80rpx;
			color: #fff;
		}
	}
}
</style>
